<template>
  <view class="service">
    <view class="service-categories">
      <view 
        class="category-item" 
        :class="{ active: activeCategory === item.index }"
        @click="selectCategory(item.index)"
        v-for="item in serviceList" 
        :key="item.index"
      >
        {{ item.data }}
      </view>
    </view>
    <view class="service-content">
      <view v-if="currentServices.length === 0" class="empty-state">
        暂无具体服务
      </view>
      <view v-else class="service-items">
        <view class="service-card" v-for="service in currentServices" :key="service.id">
        
          <view class="service-info">
            <text class="service-name">{{ service.name }}</text>
            <view class="service-details">
              <text class="service-price">¥{{ service.price }}/{{ service.unit }}</text>
              <view class="service-rating">
                <i class="fa fa-star text-yellow-400"></i>
                <text>{{ service.rating }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 服务分类数据
const serviceList = ref([
  { index: 1, data: "日常保洁" },
  { index: 2, data: "家电清洗" },
  { index: 3, data: "搬家服务" },
  { index: 4, data: "保姆月嫂" },
  { index: 5, data: "管道疏通" },
  { index: 6, data: "家具维修" },
  { index: 7, data: "地板保养" },
  { index: 8, data: "企业保洁" }
]);

// 当前选中的分类
const activeCategory = ref(null);

// 所有服务数据（根据分类关联）
const allServices = ref([
  // 日常保洁分类服务
  { id: 101, name: '全屋基础保洁', categoryId: 1, price: 45, unit: '小时', rating: 4.9 },
  { id: 102, name: '厨房深度清洁', categoryId: 1, price: 180, unit: '次', rating: 4.8 },
  { id: 103, name: '卫生间消毒', categoryId: 1, price: 120, unit: '次', rating: 4.7 },
  
  // 家电清洗分类服务
  { id: 201, name: '空调清洗', categoryId: 2, price: 80, unit: '台', rating: 4.9 },
  { id: 202, name: '洗衣机消毒', categoryId: 2, price: 60, unit: '台', rating: 4.6 },
  { id: 203, name: '抽油烟机拆洗', categoryId: 2, price: 150, unit: '台', rating: 4.8 },
  
  // 搬家服务分类
  { id: 301, name: '居民搬家（一居室）', categoryId: 3, price: 300, unit: '次', rating: 4.7 },
  { id: 302, name: '居民搬家（三居室）', categoryId: 3, price: 600, unit: '次', rating: 4.9 },
  { id: 303, name: '小型办公室搬迁', categoryId: 3, price: 800, unit: '次', rating: 4.8 },
  { id: 304, name: '家具拆装', categoryId: 3, price: 100, unit: '件', rating: 4.6 },
  
  // 保姆月嫂分类
  { id: 401, name: '月嫂服务（26天）', categoryId: 4, price: 12800, unit: '月', rating: 4.9 },
  { id: 402, name: '育儿嫂（全天）', categoryId: 4, price: 6800, unit: '月', rating: 4.8 },
  { id: 403, name: '住家保姆', categoryId: 4, price: 5500, unit: '月', rating: 4.7 },
  { id: 404, name: '白班保姆', categoryId: 4, price: 3500, unit: '月', rating: 4.6 },
  
  // 管道疏通分类
  { id: 501, name: '马桶疏通', categoryId: 5, price: 120, unit: '次', rating: 4.5 },
  { id: 502, name: '地漏疏通', categoryId: 5, price: 80, unit: '次', rating: 4.6 },
  { id: 503, name: '厨房管道疏通', categoryId: 5, price: 150, unit: '次', rating: 4.7 },
  { id: 504, name: '主管道高压清洗', categoryId: 5, price: 300, unit: '次', rating: 4.8 },
  
  // 家具维修分类
  { id: 601, name: '家具组装', categoryId: 6, price: 80, unit: '件', rating: 4.8 },
  { id: 602, name: '木质家具修复', categoryId: 6, price: 150, unit: '次', rating: 4.7 },
  { id: 603, name: '沙发翻新', categoryId: 6, price: 500, unit: '套', rating: 4.6 },
  { id: 604, name: '门锁更换', categoryId: 6, price: 100, unit: '个', rating: 4.9 },
  
  // 地板保养分类
  { id: 701, name: '木地板打蜡', categoryId: 7, price: 30, unit: '平米', rating: 4.8 },
  { id: 702, name: '瓷砖美缝', categoryId: 7, price: 45, unit: '平米', rating: 4.9 },
  { id: 703, name: '地板抛光', categoryId: 7, price: 25, unit: '平米', rating: 4.7 },
  { id: 704, name: '地板划痕修复', categoryId: 7, price: 80, unit: '处', rating: 4.6 },
  
  // 企业保洁分类
  { id: 801, name: '办公室日常保洁', categoryId: 8, price: 3500, unit: '月', rating: 4.9 },
  { id: 802, name: '商场开荒保洁', categoryId: 8, price: 25, unit: '平米', rating: 4.8 },
  { id: 803, name: '展会场地清洁', categoryId: 8, price: 1500, unit: '次', rating: 4.7 },
  { id: 804, name: '工厂车间清扫', categoryId: 8, price: 20, unit: '平米', rating: 4.6 }
]);

// 计算属性：根据当前选中的分类筛选服务
const currentServices = computed(() => {
  if (!activeCategory.value) return [];
  
  return allServices.value.filter(service => 
    service.categoryId === activeCategory.value
  );
});

// 分类选择方法
const selectCategory = (categoryIndex) => {
  activeCategory.value = categoryIndex;
};
</script>

<style lang="scss">
	.service{
		width: 100%;
		height: 1100rpx;
		display: flex;
		// background-color: red;
		.service-categories{
			height: 100%;
			width: 25%;
			border-right: 1rpx dashed gainsboro;
			
			// background-color: red;
			
			.category-item{
				cursor: pointer;
				text-align: center;
				width: 200rpx;
				height: 90rpx;
				font-size: 35rpx;
				margin: 40rpx 0;
				color: #ff4d2e;
				
				
			}
			.category-item:hover{
				color: #0f0e0d;
			}
			
			
			
			
		}
		.service-content{
			flex: 1;
			// background-color: #ff4d2e;
			.service-items{
				flex: 1;
				
				.service-card{
					width: 350rpx;
					height: 150rpx;
					margin: 30rpx;
					justify-content: center;
					cursor: pointer;
					background-color: #b5c2c2;
					border-radius: 20rpx;
					
				}
				.service-details{
					font-size: 34rpx;
					.service-rating{
						color: #ff467d;
					}
				}
			}
			
		}
	
		
	}
	

</style>
